<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ALLADYN Project homepage</title>
<link rel="stylesheet" href="../al.css" type="text/css">
<script src="../js/Alladyn.js" type="text/javascript"></script>
<script src="../js/subpaths.js" type="text/javascript"></script>
</head>

<body background="../img/bg.gif" onload="Alladyn();main()">
<div id="menu1" style="position:absolute; left:-100; top:290; z-index:3"><a href="contact.html"><img src="../img/m_feed_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu2" style="position:absolute; left:-100; top:130; z-index:3"><a href="desc.html"><img src="../img/m_desc_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu3" style="position:absolute; left:-100; top:170; z-index:3"><a href="gallery.html"><img src="../img/m_gallery_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu4" style="position:absolute; left:-130; top:210; z-index:3"><a href="docs.html"><img src="../img/m_docs_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu5" style="position:absolute; left:-100; top:250; z-index:3"><a href="down.html"><img src="../img/m_down_en.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu6" style="position:absolute; left:-100; top:90; z-index:3"><a href="about.html"><img src="../img/m_about_eng.gif" width="119" height="20" border="0"  alt=""/></a></div>
<div id="blue1" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue2" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue3" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue4" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue5" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue6" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="alll" style="position:absolute; left:312; top:-50; z-index:8"><img src="../img/name_half1.gif" width="104" height="26"/></div>
<div id="allr" style="position:absolute; left:313; top:-50; z-index:8"><img src="../img/name_half2.gif" width="101" height="26"/></div>
<div id="poziom" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="34"/></div>
<div id="pozioms" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="18"/></div>
<div id="pozioms2" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="6"/></div>
<div id="pozioms3" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="3"/></div>
<div id="dhdsb" style="position: absolute; left: 13; top: -50; z-index: 10"><img src="../img/dhdsbig.gif" width="574" height="17"/></div>

<div id="title" style="position: absolute; left: 140; top: -50; z-index: 2"><img src="../img/t_docs.gif" width="562" height="35"></div>
<div id="docsmenu" class="content" style="position: absolute; left: 140; top: 160; z-index: 2; color: #8888AA; width: 562; text-align: center;">[<a href="docs6.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="gallery.html">Gallery &gt;</a>]</div>

<div class="content" id="content" style="position: absolute; left: 140; top: 200; width:562; z-index: 2">
<div class="content">
	<a name="r7"></a><a name="r7"></a><span class="header">7. Language reference.</span><br />
	Below is an exact description of objects, properties and methods introduced by Alladyn.<br /><br />
	<a name="r71"></a><span class="bold">7.1. Object</span> <span class="b">vlay</span>.<br />
	This object is the base for Alladyn's DOM. After rebuilding the browser's DOM it contains all of the document layers. It's a substitute of known from IE and NS4 <span class="i">document.all</span> and <span class="i">document.layers</span>.<br />
	There are two ways to access the layers in this object: 
</div>
<div class="ex1">
	vlay.nameoflayer<br />
	<span class="ec">or</span><br />
	vlay["nameoflayer"]<br />
</div>
<div class="content">
	Layers in model based on <span class="b">vlay</span> have the following, added by Alladyn, properties and methods:<br /><br />
	<a name="r711"></a><span class="bold">7.1.1. Object</span> <span class="b">style</span> (<span class="i">vlay.nameoflayer.style</span>).<br />
	This object contains all the CSS properties of a layer: <span class="i">top, left, width, height, color</span>, all the properties from the <span class="i">font</span> family (<span class="i">fontFamily, fontSize</span> etc.) etc.<br /><br />
	<a name="r712"></a><span class="bold">7.1.2. Method</span> <span class="b">vpos(left,top)</span>.<br />
	This method allows to quickly moving the layer to the desired place. It is an equivalent of simultaneous use of <span class="i">style.left</span> and <span class="i">style.top</span>. It is ascribed, like other Alladyn amplifications, directly to the layer object, allowing you to shorten the time to access layer positioning.<br />
	Example of use:
</div>
<div class="ex1">
	vlay.nameoflayer.vpos(10,100)
</div>
<div class="content">
	<a name="r713"></a><span class="bold">7.1.3. Method</span> <span class="b">vclip(top,right,bottom,left)</span>.<br />
	This method allows you to clip the layer to the desired edges. The parameters <span class="i">top, right, bottom, left</span> are respectively upper, right, bottom and left edges of the clip.<br />
	Example of use:
</div>
<div class="ex1">
	vlay.nameoflayer.vclip(0,400,300,100)
</div>
<div class="content">
	<a name="r714"></a><span class="bold">7.1.4. Method</span> <span class="b">vopacity(opacity)</span>.<br />
	With this method you can set the layer's transparency. Parameter opacity sets the grade of visibility of the layer and can take values from 0 to 100. The parameter value that equals to 0 means that the layer is invisible, while 100 means that the layer is not transparent. All the values between those two describe the layer's transparency grade.<br />
	Example of use:
</div>
<div class="ex1">
	vlay.nameoflayer.vopacity(75)
</div>
<div class="content">
	In Netscape 4.x, which doesn't support transparency, the two-step transparency emulation is used. Layers are shown (in full visibility - the opacity value is presumed as 100) for the opacity value equal or bigger than 50. For the values below 50, layers are not visible (the opacity value is presumed as 0). 50 is a default value of defined transparency grade in NS4 - it is possible to change this value for each layer or globally for all layers. <br />
	The variables that describe this property are <span class="i">vlay.nameoflayer.vol</span> (used for particular layer) and <span class="i">STPE.vol</span> (used for all layers).</br /><br />
	<a name="r715"></a><span class="bold">7.1.5. </span> <span class="b">vol</span> property.<br />
	This property sets the transparency simulation grade for NS4 (look here: <a href="#r714">method <span class="i">vopacity</span></a>) for the particular layer. Opacity values below this number will cause the layer to be invisible, equal and bigger will cause to view the layer without transparency.<br />
	If the value of this property isn't defined (like it is for default), the opacity grade is set by the variable <span class="i">STPE.vol</span>.<br />
	Of course this property is used only for NS4, which doesn't support transparency.<br /><br />
	<a name="r716"></a><span class="bold">7.1.6. Method</span> <span class="b">vHTML(content)</span>.<br />
	This method allows you to switch the layer content to the new one. After it is called, new content will be written to layer (the content can be plain text, but it can also contain HTML tags).<br />
	You have to remember that NS4 resets layer formatting after writing to it, so if you want the layer to look good after using <span class="b">vHTML</span>, you have to write the style information to the layer also.<br />
	Example of use:
</div>
<div class="ex1">
	vlay.nameoflayer.vHTML("&lt;span class='font-family: Arial; font-size: 12px; color: red;'&gt;New layer content!&lt;/span&gt;");
</div>
<div class="content">
	<a name="r717"></a><span class="bold">7.1.7. Method</span> <span class="b">vkf({elements that are changing},number of steps)</span>.<br />
	This method is used for defining keyframes, which describe layer movement and change of it appearance over time.<br />
	<span class="i">Number of steps</span> is the number of frames between the previous keyframe and the keyframe that you are defining (movement is located within those frames). In the particular situation, when this value equals to 1, the keyframe is accomplished at once - in one step.<br />
	<span class="i">Elements that are changing</span> these are the parameters that describe the layer and which will change between previous keyframe and the one you're defining. They should be enclosed in {} brackets, and pairs name:value should be separated with commas.<br />
	The command syntax looks like this:
</div>
<div class="ex1">
	vlay.nameoflayer.vkf({name:value,name:value, ...,name:value},number_of_frames)
</div>
<div class="content">
	The elements that will be changed might be:<br />
	<ul>
	<li>all properties of the <span class="i">style</span> object, for example <span class="i">left, top, color</span>, etc.<br />
	You have to remember that non-numeric properties (such as <span class="i">color</span>) can be changed only if number of steps is set to 1. If the number of frames is bigger than 1, the frame properties are calculated proportionally, and this is possible only for numeric properties  (for example <span class="i">left, zIndex</span>).
	<li><span class="i">vopacity</span> parameter
	<li>clip described as <span class="i">ct, cr, cb, cl</span> (top, right, bottom, left). Because of the differences in interpretation in different browsers, you have to always set all four parameters. 
	</ul>
	Examples:
</div>
<div class="ex1">
	with(vlay.nameoflayer){<br />
	&nbsp;&nbsp;&nbsp;&nbsp;vkf({left:100,top:200,vopacity:100},1)<br />
	<span class="ec">&nbsp;&nbsp;&nbsp;&nbsp;// we set the starting position and opacity value for the layer</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;vkf({left:300},10)<br />
	<span class="ec">&nbsp;&nbsp;&nbsp;&nbsp;// in 10 frames we move it by 200 pixels to the right</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;vkf({top:400},10)<br />
	<span class="ec">&nbsp;&nbsp;&nbsp;&nbsp;// 200 pixels to the bottom</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;vkf({left:100},10)<br />
	<span class="ec">&nbsp;&nbsp;&nbsp;&nbsp;// 200 pixels to the left</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;vkf({top:200},10)<br />
	<span class="ec">&nbsp;&nbsp;&nbsp;&nbsp;// 200 pixels up</span><br />
	&nbsp;&nbsp;&nbsp;&nbsp;vkf({vopacity:0},10)<br />
	<span class="ec">&nbsp;&nbsp;&nbsp;&nbsp;// we perform a smooth disappearing, decreasing the opacity value from 100 to 0 in 10 frames</span><br />
	}
</div>
<div class="content">
	As you can see in the example above, we have to define only those parameters that will change between current keyframes.<br /><br />
	In the particular case, not defining any of the changeable elements will cause the layer to be not active for the set number of frames:
</div>
<div class="ex1">
	vlay.nameoflayer.vkf({},25)
</div>
<div class="content">
	<a name="r72"></a><span class="bold">7.2. Object</span> <span class="b">van</span>.<br />
	This object describes the eventual way of layer animation. Every layer contains it in the <span class="i">vlay</span> object (<span class="i">vlay.nameoflayer.van</span>). It has the following properties and methods:<br /><br />
	<a name="r721"></a><span class="bold">7.2.1. </span> <span class="b">group</span> property.<br />
	It denominates the animation group that the layer belongs to. In Alladyn you can group layers and independently manage movement of each group.Default value is "".<br />
	The default group, containing all the layers that aren't ascribed to the other animation group, is "".<br /><br />
	<a name="r722"></a><span class="bold">7.2.2. </span> <span class="b">go</span> property.<br />
	It denominates if the layer is animated during the animation of the group it belongs to. It can take <span class="i">true</span> or <span class="i">false</span> value.<br /><br />
	<a name="r723"></a><span class="bold">7.2.3. </span> <span class="b">mode</span> property.<br />
	It describes the behavior of the animation, the type of movement. It can take one of the following values:<br />
	<ul>
	<li><span class="i">loop</span> - when the animation reaches the last keyframe, animation is restarted and played beginning from first keyframe,
	<li><span class="i">ping</span> - when the animation reaches the last keyframe, it is restarted and played from the last keyframe to the first one (animation bounce),
	<li><span class="i">""</span> or any other value will cause the animation to stop after reaching the last keyframe and it will set the <span class="i">go</span> flag to <span class="i">false</span>. If the user's function is defined (look here: <a href="#r724">point 7.2.4.</a>), it will be activated. This is the default value of the <span class="b">mode</span> parameter.
	</ul>
	<a name="r724"></a><span class="bold">7.2.4.</span> <span class="b">UDF</span> (User Defined Function) property<br />
	It describes the function that will be called when the layer's animation finishes. This can be a JavaScript command, a call to one or more functions.<br /><br />
	<a name="r725"></a><span class="bold">7.2.5. Method</span> <span class="b">reset()</span>.<br />
	It causes the layer animation to immediately stop and it clears the animation table, user functions etc. To stop the animation without clearing other parameters of the <span class="i">van</span> object, instead of using <span class="b">reset()</span> method set the <span class="i">go</span> property to <span class="i">false</span>.<br /><br />
	<a name="r726"></a><span class="bold">7.2.6. Method</span> <span class="b">purge()</span>.<br />
	It cleans the animation path and sets the current frame as the first keyframe of the new path. It keeps animation group, user functions and current layer properties. It allows to easily and fluently changing defined animation path during the animation, but under one condition: in the current movement (to the next defined keyframe) all movement properties that will be changed must be defined (the <span class="i">top</span> and <span class="i">left</span> position and eventually other properties that were changed during the animation).<br /><br />
	<a name="r727"></a><span class="bold">7.2.7. Property</span> <span class="b">a</span>.<br />	<span class="i">affected</span> handle array of all parameters of object set during keyframe definition.<br /><br />
    <a name="r728"></a><span class="bold">7.2.8. Property</span> <span class="b">s</span>.<br />	<span class="i">shadow</span> it is collection of all parameters changed during animation, but only this part, witch had been done<br /><br />	<a name="r73"></a><span class="bold">7.3. Object</span> <span class="b">STPE</span>.<br />
	This object contains Alladyn's global variables and mechanisms responsible for control and synchronization of the layer and group animations.<br />
	It has the following methods and properties:<br /><br />
	<a name="r731"></a><span class="bold">7.3.1. Variable</span> <span class="b">v</span>.<br />
	This variable describes the version of the Alladyn's library. It is a floating point number.<br /><br />
	<a name="r732"></a><span class="bold">7.3.2. Method</span> <span class="b">go(group, interval, autostop, user's function).</span>.<br />
	This function activates the animation of the animation group, ergo every layer that belongs to that group.<br />
	<span class="i">Interval</span> is the distance in milliseconds between frames of animation.<br />
	<span class="i">Autostop</span> is an optional parameter. When it's value is set to <span class="i">true</span>, after the animation is finished the process is terminated and it doesn't react to activation of whatever layer from this group. The default value is <span class="i">false</span>.<br />
	<span class="i">User's function</span> is also an optional parameter; it has sense only for the <span class="i">true</span> value of the <span class="i">autostop</span> parameter. It describes a function that will be activated after the animation finishes and the animation group process terminates.<br /><br />
	<a name="r733"></a><span class="bold">7.3.3. Method</span> <span class="b">stop(group)</span>.<br />
	This function causes an immediate stop of the animation group and process termination. It doesn't change the state of the layers contained in the group, so it allows reviving the animation at any time.<br /><br />
	<a name="r734"></a><span class="bold">7.3.4.</span> <span class="b">vol</span> property.</br />
	This property sets the global transparency simulation grade for NS4 (look here: <a href="#r714">method <span class="i">vopacity</span></a>) used for all layers that doesn't have the grade individually set (<span class="i">vlay.nameoflayer.vol</span>). Opacity values below this number will cause the layer to be invisible in NS4, equal and bigger will cause to view the layer without transparency. The default value is 50.
	<br /><br />
	<a name="r735"></a><span class="bold">7.3.5. Method</span> <span class="b">N(name,width,parent)</span>.<br />
	Function creates new layer and eventually connect it to layer set in third parameter. Access to new layer is throught vlay array, or handler returned by function. Layer is posintioned absolutely.<br /><br />	<a name="r736"></a><span class="bold">7.3.6. Method</span> <span class="b">I()</span>.<br />	Function return array of references to all images used in document. Index is a name of image.<br /><br />	<a name="r74"></a><span class="bold">7.4. Function</span> <span class="b">Alladyn()</span>.<br />
	This function contains the whole Alladyn library. After it is started, it creates new object model in the <span class="i">vlay</span> hierarchy, all Alladyn's objects, methods and properties.<br />
	We recommend to call this function with <span class="i">onLoad</span> of the <span class="i">&lt;body&gt;</span> tag, after loading the <span class="i">Alladyn.js</span> library in the <span class="i">&lt;head&gt;</span> section.<br /><br />
	<a name="r75"></a><span class="bold">7.5. Global variables.</span><br />
	Alladyn introduces the following global variables:<br /><br />
	<a name="r751"></a><span class="bold">7.5.1. Variable</span> <span class="b">doc</span>.<br />
	It's a short name of <span class="i">document</span>. It allows you to shorten the commands (for example <span class="i">doc.write</span> etc.).<br /><br />
	<a name="r752"></a><span class="bold">7.5.2. Variables</span> <span class="b">ns4, ie, ns6</span>.</br />
	These variables allow identifying the browser in the specificic situations, for example not unified in the library we're describing. <span class="b">ns6</span> is a boolean variable, <span class="b">ie</span> and <span class="b">ns4</span> have the <span class="i">null</span> value (equal to <span class="i">false</span>) or they are the references to the traditional layer models (respectively <span class="i">document.all</span> and <span class="i">document.layers</span>) which is equal to <span class="i">true</span>.<br />
	Therefore you can use the following syntax: <span class="i">if(ie), if(ns4), ie?a:b</span> etc., or call layers respectively via <span class="i">ie.test, ie.["test"], ns4.test, ns4.["test"]</span> etc.<br /><br />
	<a name="r753"></a><span class="bold">7.5.3. Variable</span> <span class="b">up5</span>.<br />
	This variable denominates if the browser is IE5.x or NS6.x (or newer), which can mean that it realizes DOM recommended by W3C and that it is compatible with some new DHTML effects.<br />
	Of course this variable is a reference to the layers or it has the <span class="i">false</span> value.<br /><br />
	You can find more advanced examples of Alladyn use in the <a href="gallery.html">Gallery</a>.
<br /><br />
<center>[<a href="docs6.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="gallery.html">Gallery &gt;</a>]</center>
</div>
<br />
</div>
</body>
</html>
